<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>评价</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
		<style>
			h5 {
				padding-top: 15px;
			}
			
			.field-contain label {
				width: auto;
				padding-right: 0;
			}
			
			.field-contain input[type='text'] {
				width: 40px;
				height: 30px;
				padding: 5px 0;
				float: none;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">评价</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media" style="background-color: #FFFFFF;">
						<a href="../examples/new-seller-detail.html">
							<img class="mui-media-object mui-pull-left" style="height: 50px;" src="../images/head.jpg">
							<div class="mui-media-body">
								爱哭的小♥
								<p class='mui-ellipsis' style="font-size: 10pt;"><span>&nbsp;卖家信用:</span><img src="../images/s_red_1.gif" /></p>
								<p class='mui-ellipsis' style="font-size: 10pt;"><span>&nbsp;联系方式:</span>18317963220</p>
							</div>
						</a>
					</li>
				</ul>
			</div>
			<div class="mui-content-padded">
				<h5>0-20很差<span style="color: red; font-size: 14pt;">|</span>20-40一般<span style="color: red; font-size: 14pt;">|</span>40-60较好<span style="color: red; font-size: 14pt;">|</span>60-80很好<span style="color: red; font-size: 14pt;">|</span>80-100极好</h5>
				<h5 style="clear: left;">给卖家评个分：<span id='block-range-val'>50</span></h5>
				<div class="mui-input-row mui-input-range">
					<input type="range" id='block-range' value="50" min="0" max="100">
				</div>
			</div>
			
			<div class="mui-content-padded">
				<div class="mui-input-row" style="margin: 10px 5px;">
					<textarea id="textarea" rows="5" placeholder="输入评论内容"></textarea>
				</div>
			</div>
			<div class="mui-content-padded" style="margin-top: 30px;">
				<button id="submitCommit" type="button" class="mui-btn mui-btn-success mui-btn-block">提交评论</button>
			</div>
			
			
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script>
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
		//监听input事件，获取range的value值，也可以直接element.value获取该range的值
		var rangeList = document.querySelectorAll('input[type="range"]');
		for(var i = 0, len = rangeList.length; i < len; i++) {
			rangeList[i].addEventListener('input', function() {
				if(this.id.indexOf('field') >= 0) {
					document.getElementById(this.id + '-input').value = this.value;
				} else {
					document.getElementById(this.id + '-val').innerHTML = this.value;
				}

			});
		}

		/*   document.getElementById('field-range-input').addEventListener('input',function(){
		       document.getElementById('field-range').value = this.value;
		   });*/

		document.getElementById("submitCommit").onclick = function() {
			var gradeNumber = document.getElementById("block-range").value
			var commitKey = "&"+JSON.parse(localStorage.getItem("$loginUser")).account+"commit";
			var commitId = localStorage.getItem("$commitId");
			if(document.getElementById("textarea").value != ""){
				
				var content = document.getElementById("textarea").value;
				if(gradeNumber >= 80) {
					localStorage.setItem(commitKey,"极好");
					localStorage.setItem("&commitContent",content);
					mui.alert("评论成功");
					if(commitId === "1"){
						localStorage.removeItem("$commentBuy");
					}else if(commitId === "2"){
						localStorage.removeItem("$commentSell");
					}
					
				} else if(gradeNumber >= 60 && gradeNumber < 80) {
					localStorage.setItem(commitKey,"很好");
					localStorage.setItem("&commitContent",content);
					mui.alert("评论成功");
					if(commitId === "1"){
						localStorage.removeItem("$commentBuy");
					}else if(commitId === "2"){
						localStorage.removeItem("$commentSell");
					}
				} else if(gradeNumber >= 40 && gradeNumber < 60) {
					localStorage.setItem(commitKey,"较好");
					localStorage.setItem("&commitContent",content);
					mui.alert("评论成功");
					if(commitId === "1"){
						localStorage.removeItem("$commentBuy");
					}else if(commitId === "2"){
						localStorage.removeItem("$commentSell");
					}
				} else if(gradeNumber >= 20 && gradeNumber < 40) {
					localStorage.setItem(commitKey,"一般");
					localStorage.setItem("&commitContent",content);
					mui.alert("评论成功");
					if(commitId === "1"){
						localStorage.removeItem("$commentBuy");
					}else if(commitId === "2"){
						localStorage.removeItem("$commentSell");
					}
				} else {
					localStorage.setItem(commitKey,"很差");
					localStorage.setItem("&commitContent",content);
					mui.alert("评论成功");
					if(commitId === "1"){
						localStorage.removeItem("$commentBuy");
					}else if(commitId === "2"){
						localStorage.removeItem("$commentSell");
					}
				}
			}else{
				mui.alert("请输入评论内容");
			}
			
		};
	</script>

</html>